<template>
    <div style="height:100vh;background:#F8F8F8;">
        <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="$router.back(-1)"
        />

        
        <div class="ticket_box" v-if="data.length!=0 && loading">

            <router-link :to="'/ticket_details?id='+v.t_id" v-for="(v,k) in data" :key="k">
            <div class="ticket_div">
                <div class="ticket_left">

                    <div class="time_div">发车时间：{{ getDate(v.t_time) }}</div>

                    <div class="place_box">
                        {{ v.t_departCity }}---{{ v.t_destination }}
                    </div>

                    <div class="place_box">
                        车票提供：{{ v.t_name }}
                    </div>

                </div>
                <div class="ticket_right">￥{{ v.t_ticket_price }}</div>
            </div>
            </router-link>

        </div>

        <div v-else style="text-align:center;margin-top:20rem;color:#666;font-size:30rem;">没有符号条件的车票~</div>
    </div>
    

</template>

<script>
export default {
    data(){
        return {
            title: '',
            data: [],
            loading: false
        }
    },
    methods:{
        getData(){

            let that = this

            let toast1=this.$toast.loading({
                message:'加载中...',
                duration:0,
                forbidclick:true
            })

            this.$axios.post('/ticket/search',this.$qs.stringify({departCity:this.$route.query.departCity,destination:this.$route.query.destination,departDate:this.$route.query.departDate})).then( (res) => {

                that.loading = true

                if(res.data.code==1){

                    that.data =res.data.data

                    toast1.clear()

                }else{

                    that.$toast.fail(res.data.msg)

                }

            } ).catch( (err) => {

                that.loading = true

                that.$toast.fail('网络繁忙~')
            } )

        },
        getDate(time){
            time*=1000;

            let mydate=new Date(time)

            let y = mydate.getFullYear()

            let m =mydate.getMonth()+1

            let d = mydate.getDate()

            let h = mydate.getHours()

            let i = String(mydate.getMinutes())
            
            if(i.length<2){
                i="0"+i
            }

            return y+'/'+m+'/'+d+'　'+h+':'+i
        }
    },
    created(){

        this.title = this.$route.query.departCity+'--至--'+this.$route.query.destination

        this.getData()


    }
}
</script>

<style scoped>

    div.ticket_box{
        width:750rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    div.ticket_box div.ticket_div{
        width:730rem;
        min-height: 180rem;
        background-color: #fff;
        border-radius: 10rem;
        margin-top: 10rem;
        display: flex;
        justify-content: center;
    }
    div.ticket_box div.ticket_div div.ticket_left{
        width:540rem;
        display: flex;
        /* align-items: center; */
        flex-direction: column;
        justify-content: center;
    }
    div.ticket_box div.ticket_div div.ticket_left div.time_div{
        font-size: 34rem;
        color:#242629;
        font-weight: 400;
    }
    div.ticket_box div.ticket_div div.ticket_left div.place_box{
        color:#717376;
        font-size: 24rem;
        margin-top:15rem;
    }
    div.ticket_box div.ticket_div div.ticket_right{
        width:150rem;
        color: #ff4a26;
        font-weight: 700;
        font-size: 40rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
</style>